<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <%@ include file="../common/common.jsp" %>
    <script type="text/javascript" src="/js/jquery-form.js"></script>
    <style type="text/css">
        body{
            overflow: hidden;
        }
        #content{
            padding: 48px 0 48px 0;
        }
        #leftDiv{
            width: 30%;
            height: 500px;
            border: 1px solid;
            position: absolute;
            top:10%;
            left: 20%;
        }
        #mainDiv{
            width:25%;
            height: 500px;
            border:1px solid;
            position: absolute;
            top:10%;
            left: 55%;
        }
        #buttomDiv{
            border: 1px solid;
            height: 100px;
            position: absolute;
            top: 85%;
            width: 100%;
        }
        .img-div{
            position: relative;
            top: 33px;
            text-align: center;
        }
        .tip-div{
            position: relative;
            top: 125px;
            left: 200px;
        }
        .form-div{
            position: relative;
            top: 40px;
            left: -30px;
            line-height: 110px;
        }
    </style>
</head>
<body>
<div id="content">
    <div id="leftDiv"></div>
    <div id="mainDiv">
        <div class="layui-tab" style="margin-top: 0px;">
            <ul class="layui-tab-title">
                <li class="layui-this">扫码登录</li>
                <li>账号登录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="img-div">
                        <img src="/image/qr-code.png">
                    </div>
                    <div class="tip-div">
                        <span>还没有账号?<a href="#">立即注册</a></span>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="form-div">
                        <form class="layui-form" action="/login/user_login" method="post">
                            <div class="layui-form-item">
                                <label class="layui-form-label">账号:</label>
                                <div class="layui-input-block">
                                    <input type="hidden" value="${redirectUrl}" name="redirectUrl" />
                                    <input type="text" name="loginName" lay-verify="required|loginName" placeholder="账号/手机号/邮箱" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码:</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" lay-verify="required|pass" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="go">登录</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="buttomDiv"></div>
</div>
</body>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use([ 'form', 'element' ], function() {
        var element = layui.element
            ,form = layui.form;

        form.verify({
            loginName: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        form.on('submit(go)', function(data){
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
//            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</html>
